<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        MVVM模型:
            div容器等页面元素  --- View
            data 数据         --- Model
            new Vue内容       --- ViewModel 中间人
        观察发现:
            1.data中的属性,最后都出现在Vm上.
            2.Vm身上所有属性以及Vue原生的所有属性,再Vue模板中都可以直接使用.
     -->
    <div id="root">
        <h2>学校名称: {{name}}</h2>
        <h2>学校地址: {{address}}</h2>   <!-- 页面元素 View -->
        <!-- <h2>测试一下1: {{1+1}}</h2>  
        <h2>测试一下2: {{$options}}</h2>  
        <h2>测试一下3: {{$emit}}</h2>  
        <h2>测试一下4: {{_c}}</h2> -->
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue启动时的生产提示
        new Vue({      // ViewModel  Vue实例
            el: '#root',
            data: {
                name:'小程',        /* data中的内容 */
                address:'民乐小区'  /* Model */
            }
        })
    </script>
</body>

</html>